<template>
  <div class="p-6 space-y-4">
    <el-row :gutter="60">
      <el-col :span="12">
        <!-- 统计信息 -->
        <statistic-info>
          <template v-slot:title>安全指数统计</template>
          <template v-slot:first-title>安全指数统计</template>
          <template v-slot:first-num>20.88</template>
          <template v-slot:second-title>近7天内平均指数</template>
          <template v-slot:second-num>20.88</template>
          <template v-slot:third-title>近30天内平均指数</template>
          <template v-slot:third-num>20.88</template>
        </statistic-info>

        <!-- 列表表格 -->
        <statistic-table
          v-model:pagination="accidentPagination"
          :table-data="accidentTableData"
          :table-loading="accidentTableLoading"
          @fetch-list="fetchAccidentList"
        />
      </el-col>
      <el-col :span="12">
        <!-- 统计信息 -->
        <statistic-info :show-options="true">
          <template v-slot:options>
            <div class="flex items-center justify-end mb-[10px]">
              <el-button size="small" v-if="!editAccidentInfo" type="primary" @click="onEditAccidentInfo">
                <svg-icon icon-class="edit-1" class="mr-2"></svg-icon>
                编辑
              </el-button>
              <template v-else>
                <el-button size="small" type="warning" @click="onCancelEditAccidentInfo">
                  <svg-icon icon-class="cancel" class="mr-2"></svg-icon>
                  取消
                </el-button>
                <el-button size="small" type="success" @click="onSaveAccidentInfo">
                  <svg-icon icon-class="save" class="mr-2"></svg-icon>
                  保存
                </el-button>
              </template>
            </div>
          </template>
          <template v-slot:title>事故事件统计</template>
          <template v-slot:first-title>三年内重大事故</template>
          <template v-slot:first-num>
            <div>
              <template v-if="editAccidentInfo">
                <el-input v-model="accidentInfo.threeMajorNum" placeholder="三年内重大事故" clearable />
              </template>
              <template v-else>
                {{ accidentInfo.threeMajorNum }}
              </template>
            </div>
          </template>
          <template v-slot:second-title>两年内较大事故</template>
          <template v-slot:second-num>
            <div>
              <template v-if="editAccidentInfo">
                <el-input v-model="accidentInfo.twoLargerNum" placeholder="两年内较大事故" clearable />
              </template>
              <template v-else>
                {{ accidentInfo.twoLargerNum }}
              </template>
            </div>
          </template>
          <template v-slot:third-title>一年内一般事故</template>
          <template v-slot:third-num>
            <div>
              <template v-if="editAccidentInfo">
                <el-input v-model="accidentInfo.generalNum" placeholder="一年内一般事故" clearable />
              </template>
              <template v-else>
                {{ accidentInfo.generalNum }}
              </template>
            </div></template
          >
        </statistic-info>

        <!-- 列表表格 -->
        <statistic-table
          v-model:pagination="securityPagination"
          :table-data="securityTableData"
          :table-loading="securityTableLoading"
          @fetch-list="fetchSecurityList"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, computed } from 'vue';
import { ElMessage } from 'element-plus';
import { StatisticRow } from './constant';
import StatisticTable from './statisticTable.vue';
import statisticInfo from './statisticInfo.vue';

const filters = reactive({
  indicatorType: '',
  type: '',
  residualRisk: '',
  riskCriteria: ''
});

const accidentTableLoading = ref(false);
const securityTableLoading = ref(false);

const accidentPagination = reactive({
  currentPage: 1,
  pageSize: 12,
  total: 0
});
const securityPagination = reactive({
  currentPage: 1,
  pageSize: 12,
  total: 0
});

const allRecords = ref<StatisticRow[]>([
  {
    id: 1,
    indicatorType: '双重预防',
    weight: 20,
    safetyName: '双重预防',
    type: '双重预防 | 双重预防'
  }
]);

const accidentTableData = ref<StatisticRow[]>([]);
const securityTableData = ref<StatisticRow[]>([]);

const getFilteredRecords = () => {
  return allRecords.value.filter((r) => {
    const m1 = filters.indicatorType ? r.indicatorType.includes(filters.indicatorType) : true;
    const m2 = filters.type ? r.type.includes(filters.type) : true;
    return m1 && m2;
  });
};

const refreshAccidentTable = (records: StatisticRow[]) => {
  accidentPagination.total = records.length;
  const start = (accidentPagination.currentPage - 1) * accidentPagination.pageSize;
  const end = start + accidentPagination.pageSize;
  accidentTableData.value = records.slice(start, end);
};
const refreshSecurityTable = (records: StatisticRow[]) => {
  securityPagination.total = records.length;
  const start = (securityPagination.currentPage - 1) * securityPagination.pageSize;
  const end = start + securityPagination.pageSize;
  securityTableData.value = records.slice(start, end);
};

const fetchAccidentList = async () => {
  accidentTableLoading.value = true;
  try {
    await new Promise((r) => setTimeout(r, 200));
    const filtered = getFilteredRecords();
    refreshAccidentTable(filtered);
  } catch (e) {
    ElMessage.error('数据加载失败，请稍后重试');
  } finally {
    accidentTableLoading.value = false;
  }
};
const fetchSecurityList = async () => {
  securityTableLoading.value = true;
  try {
    await new Promise((r) => setTimeout(r, 200));
    const filtered = getFilteredRecords();
    refreshSecurityTable(filtered);
  } catch (e) {
    ElMessage.error('数据加载失败，请稍后重试');
  } finally {
    securityTableLoading.value = false;
  }
};

const onCreate = () => {};

const accidentInfo = reactive({
  threeMajorNum: 20.88,
  twoLargerNum: 20.88,
  generalNum: 20.88
});
const editAccidentInfo = ref(false);
const onEditAccidentInfo = () => {
  editAccidentInfo.value = true;
};
const onCancelEditAccidentInfo = () => {
  editAccidentInfo.value = false;
};
const onSaveAccidentInfo = () => {
  editAccidentInfo.value = false;
};

onMounted(async () => {
  await fetchSecurityList();
  await fetchAccidentList();
});
</script>
